<template>
  <div class="bigbox">
    <div class="deng">
      <h1>登录你的账号</h1>
      <div>
        <label for="">登录：</label
        ><el-input placeholder="请输入账号" v-model="ID"></el-input>
      </div>
      <br />
      <div>
        <label for="">密码：</label>
        <el-input
          placeholder="请输入密码"
          v-model="cd"
          show-password
        ></el-input>
      </div>
      <br />
      <el-button :plain="true" @click="open2">登陆</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 123456,
      code: 123,
      ID: null,
      cd: null,
    };
  },
  mounted() {
    this.$route.meta.isAuto;
    console.log("初始", this.$route.meta.isAuto);
  },

  methods: {
    open2() {
      if (this.ID == this.id && this.cd == this.code) {
        localStorage.setItem("ID", this.ID);
        this.$router.push({ name: "home" });
        this.$message({
          message: "恭喜你，登录成功",
          type: "success",
        });
      } else {
        (this.cd = null),
          (this.ID = null),
          this.$message({
            message: "请正确输入账号和密码",
            type: "warning",
          });
      }
    },
  },
  // // 组件路由，前置路由
  // beforeRouteEnter(to, from, next) {
  //   let data = localStorage.getItem("ID");
  //   if (data) {
  //     if (to.name == "about") {
  //       next({ name: "home" });
  //     } else {
  //       next();
  //     }
  //   } else {
  //     if (to.name != "about") {
  //       next({ name: "about" });
  //     } else {
  //       next();
  //     }
  //   }
  // },
  // // 后置路由，离开的时候被调用
  // beforeRouteLeave(to, from, next) {
  //   console.log("我是后置路由");
  //   if (to.name == "about") {
  //     next({ name: "home" });
  //   } else {
  //     next();
  //   }
  // },
};
</script>

<style >
.bigbox {
  width: 500px;
  height: 500px;
  margin: auto;
}
.el-input {
  width: 150px;
}
.deng {
  width: 250px;
  height: 250px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>